<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生数据表</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<form id="studentForm">
    <label for="name" onclick="focusInput('name')">学生姓名:</label>
    <input type="text" id="name" required><br><br>
    <label for="age" onclick="focusInput('age')">学生年龄:</label>
    <input type="number" id="age" required min="16" max="22"><br><br>
    <label onclick="focusInput('gender')">学生性别:</label>
    <input type="radio" id="male" name="gender" value="男" required>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label><br><br>
    <label for="sid" onclick="focusInput('sid')">学生学号:</label>
    <input type="text" id="sid" required><br><br>
    <label for="class" onclick="focusInput('class')">学生班级:</label>
    <select id="class" required>
        <optgroup label="CS">
            <option value="CS211">CS211</option>
            <option value="CS212">CS212</option>
            <option value="CS213">CS213</option>
            <option value="CS214">CS214</option>
        </optgroup>
        <optgroup label="NE">
            <option value="NE211">NE211</option>
            <option value="NE212">NE212</option>
            <option value="NE213">NE213</option>
            <option value="NE214">NE214</option>
        </optgroup>
    </select><br><br>
</form>
</div>

<h2>学生表</h2>
<table id="studentTable" border="1">
    <thead>
    <tr>
        <th>学生姓名</th>
        <th>学生年龄</th>
        <th>学生性别</th>
        <th>学生学号</th>
        <th>学生班级</th>
    </tr>
    </thead>
    <tbody ondragover="allowDrop(event)" ondrop="drop(event)"></tbody>
</table>

<div class="button-container">
    <button onclick="addStudent()">添加学生</button>
    <button onclick="deleteStudent()">删除学生</button>
    <button onclick="showStatistics()">统计学生</button>
</div>

<script src="script.js"></script>

</body>
</html>
